<template>
    <div class="setting-model-details-view" style="min-height: calc(100vh - 50px)">

      <modules-title class="title-position" titleName="项目模板详情">

        <template slot="btn">
          <el-button
            plain
            size="mini"
            @click="goBack">返回</el-button>
          <el-button
            v-if="datas.status == 1"
            type="primary"
            size="mini"
            @click="editClick">编辑</el-button>
          <el-button
            v-if="datas.status == 1 && datas.project_task.length"
            type="primary"
            size="mini"
            @click="updateStatus">启用</el-button>
          <el-button
            v-if="datas.status == 2"
            type="primary"
            size="mini"
            @click="updateStatus">停用</el-button>
          <el-button
            v-if="datas.status == 1"
            type="primary"
            size="mini"
            @click="deleteClick">删除</el-button>
        </template>

      </modules-title>


      <div class="pj-content">
        <div class="content-view">

          <el-card class="box-card" shadow="hover">

            <div class="information-view">

              <div class="information-item">

                <p class="title">项目模板名称：</p>
                <p class="value">{{datas.project_template_name}}</p>

              </div>

              <div class="information-item">

                <p class="title">适用项目阶段：</p>
                <p class="value">{{datas.project_phases_name}}</p>

              </div>

              <div class="information-item">

                <p class="title">申报类别：</p>
                <p class="value">{{datas.project_category_name}}</p>

              </div>

            </div>

            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="里程碑" name="first">

                <el-table
                  size="medium"
                  :data="datas.project_task"
                  align="center"
                  border
                  row-key="id"
                  default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  style="width: 100%">

                  <el-table-column
                    type="index"
                    align="center"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    prop="task_name"
                    header-align="center"
                    label="里程碑/任务名称">
                    <template slot-scope="scope">

                      <span v-if="(!scope.row.children || !scope.row.children.length) && scope.row.level == 1" style="padding-left: 25px">  </span>
                      <span>{{scope.row.task_name}}</span>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="start_after_days"
                    align="center"
                    label="父任务开始几天后开始/前置任务结束几天后开始"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="foreground_task_name"
                    label="前置任务"
                    align="center"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    prop="duration"
                    label="工期（天）"
                    align="center"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    prop="ts"
                    align="center"
                    label="交付文档"
                    width="150">
                    <template slot-scope="scope">

                      <div v-if="scope.row.files.length > 0">


                        <el-popover
                          placement="top-start"
                          width="200"
                          trigger="hover">
                          <div>
                            <div v-for="item in scope.row.files" style="padding-bottom: 5px">
                              <i class="el-icon-document">{{  item.file_name}}</i>
                            </div>
                          </div>
                          <i slot="reference" class="el-icon-document">{{scope.row.files.length}}</i>
                        </el-popover>
                      </div>


                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="阶段性评审"
                    width="100">
                    <template slot-scope="scope">
                      <span>{{scope.row.periodical_review?'是':'否'}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="强制验收"
                    width="100">
                    <template slot-scope="scope">
                      <span>{{scope.row.mandatory_check?'是':'否'}}</span>
                    </template>
                  </el-table-column>
                </el-table>

              </el-tab-pane>
              <el-tab-pane label="文档" name="second">

                <el-table
                  :data="documents"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="file_name"
                    align="center"
                    label="文档名称">
                  </el-table-column>
                  <el-table-column
                    prop="file_type"
                    label="文档类型"
                    align="center"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    label="申报所需文件"
                    align="center"
                    width="150">
                    <template slot-scope="scope">
                      <span>{{scope.row.need?'是':'否'}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="task_name"
                    align="center"
                    label="提交任务">
                  </el-table-column>
                </el-table>

              </el-tab-pane>
            </el-tabs>

          </el-card>


        </div>
      </div>



    </div>
</template>

<script>

    export default {
        name: "index",
        data:function () {
            return{
                tableData:[],
                documents:[],
                activeName:'first',
                datas:{}
            }
        },
        mounted:function() {
            // this.tableData = JSON.parse(test.text)
            //
            if (this.$route.query.id){
                this.getData(this.$route.query.id);
            }
        },
        methods:{
            deleteClick:function(){
                this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.PROJECT_TEMPLATE_DELETE(this.datas.id).then((res)=>{
                        if (res.code == 200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.$router.back();
                        }else {
                            this.$message.error(res.msg)
                        }
                    }).catch((err)=>{

                    })

                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });
            },
            getData:function(id){
                this.$api.PROJECT_TEMPLATE_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.datas = res.data;
                        this.documents = [];
                        this.dealDocument(this.datas.project_task);
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            goBack:function () {
                this.$router.back();
            },
            editClick:function () {
                this.$router.push({ name: 'modeSettingEdit' ,query:{id:this.datas.id}})
            },
            handleClick:function () {

            },
            dealDocument:function (list) {

                for (let i = 0; i < list.length; i++){
                    this.documents = this.documents.concat(list[i].files)
                    if (list[i].children && list[i].children.length){
                        this.dealDocument(list[i].children);
                    }
                }
            },
            updateStatus:function () {
                if (!this.datas.project_task.length){
                    this.$message.error("请添加里程碑")
                    return;
                }
                this.$api.PROJECT_TEMPLATE_STATUS(this.datas.id).then(res=>{
                    if (res.code == 200){
                        this.$message.success('更新成功')
                        this.getData(this.datas.id);
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../../assets/scss/views/setting/model/details.scss";
</style>
